<route lang="json">
{
  "style": {
    "navigationBarTitleText": "平台信息演示",
    "navigationBarBackgroundColor": "#007aff",
    "navigationBarTextStyle": "white",
    "backgroundColor": "#f5f5f5",
    "enablePullDownRefresh": true,
    "onReachBottomDistance": 50
  },
  "mp-weixin": {
    "enableShareAppMessage": true,
    "enableShareTimeline": true
  }
}
</route>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useAppStore } from '@/store/app'
import { usePlatform, useScreen, useWechat } from '@/composables'
import { configWechatShare } from '@/utils/wechat'

const appStore = useAppStore()
const { screenWidth, screenHeight, viewportHeight, contentHeight, screenSize } = useScreen()
const { checkPlatform, checkNetworkStatus } = usePlatform()
const {
  setTitle,
  isJSSDKReady,
  isJSSDKLoaded,
  jssdkError,
  isWechatBrowser,
  isWechatMiniProgram,
  isWechatEnvironment,
  canUseJSSDK,
  initJSSDK,
  configShare,
  checkSupport,
  checkJSSDKLoaded,
} = useWechat()

// 平台信息
const platformInfo = ref({
  type: '',
  name: '',
  terminal: '',
  os: '',
  wechat: {
    isWechatBrowser: false,
    isWechatMiniProgram: false,
    isWechatEnvironment: false,
    version: '',
    canUseJSSDK: false,
  },
})

// 检查原始微信JS-SDK对象是否存在
const hasOriginalWxSDK = computed(() => {
  // #ifdef H5
  if (typeof window !== 'undefined') {
    // @ts-expect-error _wxOriginal is set by WeChat JS-SDK loading
    return window._wxOriginal && typeof window._wxOriginal.config === 'function'
  }
  // #endif
  return false
})

// 初始化
onMounted(async () => {
  await appStore.initApp()
  // 获取平台信息
  const info = checkPlatform()
  platformInfo.value = {
    ...info,
    wechat: {
      isWechatBrowser: info.isWechatBrowser,
      isWechatMiniProgram: info.isWechatMiniProgram,
      isWechatEnvironment: info.isWechatEnvironment,
      version: info.wechatVersion || '未知',
      canUseJSSDK: info.isWechatBrowser || info.isWechatMiniProgram,
    },
  }
  console.log('演示页面初始化完成')

  // 小程序环境默认启用分享 (使用运行时检查而非条件编译)
  if (platformInfo.value.wechat.isWechatMiniProgram) {
    enableMiniProgramShare()
  }

  // 在微信浏览器环境中检查JSSDK加载状态 (稍等一下让脚本有时间加载)
  if (platformInfo.value.wechat.isWechatBrowser) {
    setTimeout(() => {
      checkJSSDKLoaded()
      console.log('JSSDK脚本加载检查完成:', isJSSDKLoaded.value)
    }, 1000) // 等待1秒让脚本加载
  }
})

// 小程序分享到好友
// #ifdef MP-WEIXIN
function onShareAppMessage() {
  return {
    title: '淘辰蒂培训管理系统 - 平台信息演示',
    path: '/pages/demo/platform-demo',
    imageUrl: 'https://via.placeholder.com/300x300.png?text=淘辰蒂',
    success: () => {
      console.log('分享成功')
    },
    fail: (error: any) => {
      console.error('分享失败:', error)
    },
  }
}

// 小程序分享到朋友圈
function onShareTimeline() {
  return {
    title: '淘辰蒂培训管理系统 - 平台信息演示',
    query: '',
    imageUrl: 'https://via.placeholder.com/300x300.png?text=淘辰蒂',
    success: () => {
      console.log('分享到朋友圈成功')
    },
    fail: (error: any) => {
      console.error('分享到朋友圈失败:', error)
    },
  }
}

// 暴露生命周期函数给小程序系统
defineExpose({
  onShareAppMessage,
  onShareTimeline,
})
// #endif

// 刷新信息
function refreshInfo() {
  appStore.updateScreenInfo()
  // 重新获取平台信息
  const info = checkPlatform()
  platformInfo.value = {
    ...info,
    wechat: {
      isWechatBrowser: info.isWechatBrowser,
      isWechatMiniProgram: info.isWechatMiniProgram,
      isWechatEnvironment: info.isWechatEnvironment,
      version: info.wechatVersion || '未知',
      canUseJSSDK: info.isWechatBrowser || info.isWechatMiniProgram,
    },
  }
  appStore.showSuccess('信息已刷新')
}

// 测试网络
async function testNetwork() {
  const isConnected = await checkNetworkStatus()
  if (isConnected) {
    appStore.showSuccess('网络连接正常')
  }
  else {
    appStore.showError('网络连接失败')
  }
}

// 测试标题
function testTitle() {
  setTitle('桃陈帝管理后台 - 演示页面')
  appStore.showSuccess('标题已设置')
}

// 测试提示
function testToast() {
  appStore.showToast('这是一个测试提示')
}

// 等待微信 JS-SDK 加载
function waitForWechatJSSDK(): Promise<boolean> {
  return new Promise((resolve) => {
    // #ifdef H5
    let attempts = 0
    const maxAttempts = 50 // 最多等待5秒

    const checkWx = () => {
      attempts++

      if (typeof window !== 'undefined') {
        // 检查保存的原始微信JS-SDK对象
        // @ts-expect-error _wxOriginal is set by WeChat JS-SDK loading
        if (window._wxOriginal && typeof window._wxOriginal.config === 'function') {
          resolve(true)
          return
        }
      }

      if (attempts >= maxAttempts) {
        resolve(false)
        return
      }

      setTimeout(checkWx, 100)
    }

    checkWx()
    // #endif

    // #ifndef H5
    resolve(false)
    // #endif
  })
}

// 测试 JSSDK 初始化
async function testJSSDKInit() {
  if (!isWechatBrowser.value) {
    appStore.showError('当前环境不是微信浏览器')
    return
  }

  // 等待微信 JS-SDK 加载
  appStore.showToast('正在加载微信 JS-SDK...')
  const jssdkReady = await waitForWechatJSSDK()

  if (!jssdkReady) {
    appStore.showError('微信 JS-SDK 加载失败，请检查网络连接')
    return
  }

  // 检查保存的原始微信JS-SDK对象是否可用
  // #ifdef H5
  if (typeof window === 'undefined') {
    appStore.showError('window 对象未定义')
    return
  }

  // 检查保存的原始微信JS-SDK对象
  // @ts-expect-error _wxOriginal is set by WeChat JS-SDK loading
  if (!window._wxOriginal) {
    appStore.showError('原始微信JS-SDK对象未保存，可能脚本加载失败')
    return
  }

  // 检查关键函数是否存在
  // @ts-expect-error _wxOriginal is set by WeChat JS-SDK loading
  if (typeof window._wxOriginal.config !== 'function') {
    appStore.showError('原始微信JS-SDK版本不兼容或加载不完整')
    return
  }
  // #endif

  appStore.showSuccess('微信 JS-SDK 加载成功！')

  // 模拟 JSSDK 配置（实际使用时需要从服务器获取）
  const config = {
    appId: 'wxf247621ed76edfa7', // 示例AppID
    timestamp: Math.floor(Date.now() / 1000),
    nonceStr: 'test_nonce_str',
    signature: 'test_signature',
    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'updateAppMessageShareData', 'updateTimelineShareData'],
  }

  console.log('🔧 正在使用测试配置初始化JSSDK...')
  console.log('配置参数:', config)

  try {
    const success = await initJSSDK(config)
    if (success) {
      // 初始化成功（包括测试环境的"成功"）
      console.log('🎉 JSSDK初始化成功！')
      console.log('📊 建议下一步：分享功能已自动配置，可通过右上角菜单分享')

      appStore.showSuccess(`🎉 JSSDK 初始化成功！\n💡 已自动配置分享功能\n🎯 现在可以通过右上角菜单分享`)

      // 自动配置分享功能
      setTimeout(() => {
        const shareConfig = {
          title: '淘辰蒂培训管理系统',
          desc: '专业的培训班管理系统，提供完整的培训管理解决方案',
          link: typeof window !== 'undefined' ? window.location.href : 'https://example.com',
          imgUrl: 'https://via.placeholder.com/300x300.png?text=淘辰蒂',
        }

        console.log('🔧 自动配置分享功能...')

        // #ifdef H5
        try {
          // 配置分享功能
          console.log('📱 配置H5分享...')
          configWechatShare(shareConfig)
          console.log('✅ H5分享功能配置完成')
        }
        catch (shareError) {
          console.log('⚠️ H5分享配置失败:', shareError)
        }
        // #endif
      }, 500)
    }
    else {
      appStore.showError('JSSDK 初始化失败 - 配置参数无效')
    }
  }
  catch (error: any) {
    appStore.showError(`JSSDK 初始化失败: ${error.message}`)
  }
}

// 测试分享配置
function testShareConfig() {
  if (!isWechatBrowser.value) {
    appStore.showError('当前环境不是微信浏览器')
    return
  }

  if (!isJSSDKReady.value) {
    appStore.showError('JSSDK 未初始化，请先初始化 JSSDK')
    return
  }

  const shareConfig = {
    title: '淘辰蒂培训管理系统',
    desc: '专业的培训班管理系统，提供完整的培训管理解决方案',
    link: typeof window !== 'undefined' ? window.location.href : 'https://example.com',
    imgUrl: 'https://via.placeholder.com/300x300.png?text=淘辰蒂',
  }

  try {
    configShare(shareConfig)
    appStore.showSuccess('分享配置成功，现在可以分享到微信了')
  }
  catch (error: any) {
    appStore.showError(`分享配置失败: ${error.message}`)
  }
}

// 检查微信功能支持
function checkWechatSupport() {
  const support = checkSupport()
  const currentPlatform = platformInfo.value.type

  let shareSupport = ''
  if (currentPlatform === 'mp-weixin') {
    shareSupport = '✅ 支持小程序分享'
  }
  else if (currentPlatform === 'h5' && support.isWechatBrowser) {
    shareSupport = '✅ 支持H5分享(需初始化JSSDK)'
  }
  else {
    shareSupport = '❌ 不支持微信分享'
  }

  const supportInfo = [
    `微信浏览器: ${support.isWechatBrowser ? '是' : '否'}`,
    `微信小程序: ${support.isWechatMiniProgram ? '是' : '否'}`,
    `微信环境: ${support.isWechatEnvironment ? '是' : '否'}`,
    `支持 JSSDK: ${support.canUseJSSDK ? '是' : '否'}`,
    `支持微信支付: ${support.canPay ? '是' : '否'}`,
    `JSSDK 就绪: ${support.isJSSDKReady ? '是' : '否'}`,
    `当前平台: ${currentPlatform}`,
    `分享支持: ${shareSupport}`,
    `---`,
    `环境检测结果:`,
    `platformInfo.type: ${platformInfo.value.type}`,
    `platformInfo.wechat.isWechatMiniProgram: ${platformInfo.value.wechat.isWechatMiniProgram}`,
    `platformInfo.wechat.isWechatBrowser: ${platformInfo.value.wechat.isWechatBrowser}`,
  ]

  appStore.showToast(supportInfo.join('\n'))
}

// 测试分享功能
function testShare() {
  if (!isWechatBrowser.value) {
    appStore.showError('当前环境不是微信浏览器，无法测试分享功能')
    return
  }

  if (!isJSSDKReady.value) {
    appStore.showError('JSSDK 未就绪，请先初始化 JSSDK')
    return
  }

  appStore.showSuccess('分享已配置，请点击右上角菜单进行分享')
}

// 小程序分享功能
function enableMiniProgramShare() {
  // 运行时检查，确保只在小程序环境中执行
  if (!platformInfo.value.wechat.isWechatMiniProgram) {
    appStore.showError('仅在微信小程序环境中支持')
    return
  }

  // #ifdef MP-WEIXIN
  try {
    // 双重检查：确保 API 存在
    if (typeof uni.showShareMenu !== 'function') {
      appStore.showError('当前环境不支持分享菜单功能')
      return
    }

    uni.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline'],
      success: () => {
        appStore.showSuccess('小程序分享菜单已启用')
      },
      fail: (error: any) => {
        console.log('启用分享菜单失败:', error)
        appStore.showError(`启用分享菜单失败: ${error.errMsg || '未知错误'}`)
      },
    })
  }
  catch (error: any) {
    console.log('分享菜单异常:', error)
    appStore.showError(`启用分享菜单失败: ${error.message}`)
  }
  // #endif

  // #ifndef MP-WEIXIN
  appStore.showError('仅在微信小程序环境中支持')
  // #endif
}

function disableMiniProgramShare() {
  // 运行时检查，确保只在小程序环境中执行
  if (!platformInfo.value.wechat.isWechatMiniProgram) {
    appStore.showError('仅在微信小程序环境中支持')
    return
  }

  // #ifdef MP-WEIXIN
  try {
    // 双重检查：确保 API 存在
    if (typeof uni.hideShareMenu !== 'function') {
      appStore.showError('当前环境不支持分享菜单功能')
      return
    }

    uni.hideShareMenu({
      success: () => {
        appStore.showSuccess('小程序分享菜单已隐藏')
      },
      fail: (error: any) => {
        console.log('隐藏分享菜单失败:', error)
        appStore.showError(`隐藏分享菜单失败: ${error.errMsg || '未知错误'}`)
      },
    })
  }
  catch (error: any) {
    console.log('分享菜单异常:', error)
    appStore.showError(`隐藏分享菜单失败: ${error.message}`)
  }
  // #endif

  // #ifndef MP-WEIXIN
  appStore.showError('仅在微信小程序环境中支持')
  // #endif
}

// 主动分享（注意：小程序主动分享需要用户手势触发）
function triggerMiniProgramShare() {
  // 运行时检查，确保只在小程序环境中执行
  if (!platformInfo.value.wechat.isWechatMiniProgram) {
    appStore.showError('仅在微信小程序环境中支持')
    return
  }

  // #ifdef MP-WEIXIN
  try {
    // 检查当前环境是否支持分享
    if (typeof uni.shareAppMessage !== 'function') {
      appStore.showError('当前环境不支持主动分享')
      return
    }

    uni.shareAppMessage({
      title: '淘辰蒂培训管理系统',
      path: '/pages/demo/platform-demo',
      imageUrl: '', // 使用空字符串让系统自动截图
      success: () => {
        appStore.showSuccess('分享成功')
      },
      fail: (error: any) => {
        console.log('分享失败详情:', error)
        if (error.errMsg && error.errMsg.includes('cancel')) {
          appStore.showToast('用户取消了分享')
        }
        else if (error.errMsg && error.errMsg.includes('shareAppMessage:fail')) {
          appStore.showError('分享功能暂时不可用，请通过右上角菜单分享')
        }
        else {
          appStore.showError(`分享失败: ${error.errMsg || '未知错误'}`)
        }
      },
    })
  }
  catch (error: any) {
    console.log('分享异常:', error)
    appStore.showError('分享功能异常，请使用右上角菜单分享')
  }
  // #endif

  // #ifndef MP-WEIXIN
  appStore.showError('仅在微信小程序环境中支持')
  // #endif
}

// 测试网络连通性
async function testNetworkConnectivity() {
  appStore.showToast('正在测试网络连通性...')

  try {
    // #ifdef H5
    // 测试微信 JS-SDK 脚本URL的可访问性
    const jssdkUrl = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js'

    await fetch(jssdkUrl, {
      method: 'HEAD', // 只获取头部信息，节省流量
      mode: 'no-cors', // 避免跨域问题
      cache: 'no-cache',
    })

    appStore.showSuccess('✅ 微信 JS-SDK 服务器连接正常')
    // #endif

    // #ifndef H5
    appStore.showError('仅在 H5 环境中支持')
    // #endif
  }
  catch (error: any) {
    appStore.showError(`❌ 网络连接失败: ${error.message}`)
  }
}

// 手动检查JSSDK脚本加载
function manualCheckJSSDK() {
  console.log('=== 开始详细检查JSSDK脚本 ===')

  if (!isWechatBrowser.value) {
    const errorMsg = '当前环境不是微信浏览器'
    console.error('❌', errorMsg)
    appStore.showError(errorMsg)
    return
  }

  appStore.showToast('正在检查 JSSDK 脚本加载状态...')
  console.log('📱 当前环境: 微信浏览器')

  // 详细检查过程
  const checkResults = []

  // #ifdef H5
  // 检查window对象
  if (typeof window === 'undefined') {
    const errorMsg = '❌ window 对象不存在'
    checkResults.push(errorMsg)
    console.error(errorMsg)
    appStore.showError(checkResults.join('\n'))
    return
  }
  checkResults.push('✅ window 对象存在')
  console.log('✅ window 对象存在')

  // 检查document中的script标签
  const scripts = document.querySelectorAll('script[src*="jweixin"]')
  const scriptInfo = `📄 页面中微信脚本标签数量: ${scripts.length}`
  checkResults.push(scriptInfo)
  console.log(scriptInfo)

  if (scripts.length > 0) {
    const scriptUrl = `📄 脚本URL: ${scripts[0].src}`
    checkResults.push(scriptUrl)
    console.log(scriptUrl)

    // 检查脚本加载状态
    const script = scripts[0] as HTMLScriptElement
    console.log('📄 脚本加载状态:', {
      readyState: script.readyState || 'unknown',
      src: script.src,
      async: script.async,
      defer: script.defer,
    })
  }
  else {
    console.warn('⚠️ 未找到微信JS-SDK脚本标签')
  }

  // 检查保存的原始微信JS-SDK对象
  // @ts-expect-error _wxOriginal is set by WeChat JS-SDK loading
  if (window._wxOriginal) {
    checkResults.push('✅ 发现保存的原始微信JS-SDK对象')
    console.log('✅ 发现保存的原始微信JS-SDK对象')

    // @ts-expect-error _wxOriginal is set by WeChat JS-SDK loading
    const wxOriginal = window._wxOriginal
    console.log('📊 原始微信JS-SDK对象详细信息:', {
      type: typeof wxOriginal,
      keys: Object.keys(wxOriginal).slice(0, 10),
      totalKeys: Object.keys(wxOriginal).length,
      version: wxOriginal.version || 'unknown',
    })

    // 检查关键函数
    const wxMethods = ['config', 'ready', 'error', 'invoke', 'checkJsApi']
    wxMethods.forEach((method) => {
      if (typeof wxOriginal[method] === 'function') {
        checkResults.push(`✅ _wxOriginal.${method} 方法存在`)
        console.log(`✅ _wxOriginal.${method} 方法存在`)
      }
      else {
        checkResults.push(`❌ _wxOriginal.${method} 方法不存在`)
        console.log(`❌ _wxOriginal.${method} 方法不存在`)
      }
    })

    if (typeof wxOriginal.config === 'function') {
      checkResults.push('✅ 原始微信JS-SDK可用')
      console.log('✅ 原始微信JS-SDK可用')
    }
    else {
      checkResults.push('❌ 原始微信JS-SDK不可用')
      console.log('❌ 原始微信JS-SDK不可用')
    }
  }
  else {
    checkResults.push('❌ 未发现保存的原始微信JS-SDK对象')
    console.log('❌ 未发现保存的原始微信JS-SDK对象')
  }

  // 检查当前wx对象（可能被uni-app覆盖）
  if (!('wx' in window)) {
    checkResults.push('❌ wx 对象不存在')
    checkResults.push('💡 可能原因:')
    checkResults.push('  - 网络连接问题，请点击"测试网络连通性"')
    checkResults.push('  - 脚本加载超时，请稍等片刻后重试')
    checkResults.push('  - 微信服务器访问问题')
    checkResults.push('  - 被防火墙或广告拦截器阻止')

    console.error('❌ wx 对象不存在')
    console.log('💡 可能原因:')
    console.log('  - 网络连接问题，请点击"测试网络连通性"')
    console.log('  - 脚本加载超时，请稍等片刻后重试')
    console.log('  - 微信服务器访问问题')
    console.log('  - 被防火墙或广告拦截器阻止')
    console.log('🔧 建议操作:')
    console.log('  1. 点击"测试网络连通性"按钮')
    console.log('  2. 刷新页面重新加载')
    console.log('  3. 检查浏览器控制台Network标签页的错误信息')

    // 如果没有保存的原始对象，则显示错误
    // @ts-expect-error _wxOriginal is set by WeChat JS-SDK loading
    if (!window._wxOriginal) {
      appStore.showError(checkResults.join('\n'))
      return
    }
  }
  else {
    checkResults.push('✅ wx 对象存在')
    console.log('✅ wx 对象存在')

    // 详细检查wx对象
    // @ts-expect-error wx is provided by WeChat JS-SDK
    console.log('📊 wx 对象详细信息:', {
      // @ts-expect-error wx is provided by WeChat JS-SDK
      type: typeof wx,
      // @ts-expect-error wx is provided by WeChat JS-SDK
      keys: Object.keys(wx).slice(0, 10),
      // @ts-expect-error wx is provided by WeChat JS-SDK
      totalKeys: Object.keys(wx).length,
      // @ts-expect-error wx is provided by WeChat JS-SDK
      version: wx.version || 'unknown',
    })

    // 检查wx.config函数
    // @ts-expect-error wx is provided by WeChat JS-SDK
    if (typeof wx.config !== 'function') {
      checkResults.push('❌ wx.config 函数不存在')
      // @ts-expect-error wx is provided by WeChat JS-SDK
      checkResults.push(`wx 对象类型: ${typeof wx}`)
      // @ts-expect-error wx is provided by WeChat JS-SDK
      checkResults.push(`wx 对象总共有 ${Object.keys(wx).length} 个属性`)

      // @ts-expect-error wx is provided by WeChat JS-SDK
      console.error('❌ wx.config 函数不存在, wx对象类型:', typeof wx)
      // @ts-expect-error wx is provided by WeChat JS-SDK
      console.error('wx 对象内容（前20个）:', Object.keys(wx).slice(0, 20))
      // @ts-expect-error wx is provided by WeChat JS-SDK
      console.error('wx 对象总共有', Object.keys(wx).length, '个属性')

      // 检查是否为uni-app的wx对象
      // @ts-expect-error wx is provided by WeChat JS-SDK
      if (Object.keys(wx).includes('$emit') || Object.keys(wx).includes('getSystemInfo')) {
        checkResults.push('🔍 检测到这是uni-app的wx对象，不是微信JS-SDK')
        console.log('🔍 检测到这是uni-app的wx对象，不是微信JS-SDK')
      }

      // 如果没有保存的原始对象，则显示错误
      // @ts-expect-error _wxOriginal is set by WeChat JS-SDK loading
      if (!window._wxOriginal) {
        appStore.showError(checkResults.join('\n'))
        return
      }
    }
    else {
      checkResults.push('✅ wx.config 函数存在')
      console.log('✅ wx.config 函数存在')
    }
  }

  // 检查其他关键函数
  // @ts-expect-error wx is provided by WeChat JS-SDK
  const readyStatus = typeof wx.ready === 'function' ? '✅' : '❌'
  // @ts-expect-error wx is provided by WeChat JS-SDK
  const errorStatus = typeof wx.error === 'function' ? '✅' : '❌'
  // @ts-expect-error wx is provided by WeChat JS-SDK
  const invokeStatus = typeof wx.invoke === 'function' ? '✅' : '❌'

  checkResults.push(`wx.ready: ${readyStatus}`)
  checkResults.push(`wx.error: ${errorStatus}`)
  checkResults.push(`wx.invoke: ${invokeStatus}`)

  console.log('🔧 微信JS-SDK函数检查:')
  // @ts-expect-error wx is provided by WeChat JS-SDK
  console.log(`  wx.ready: ${readyStatus} (${typeof wx.ready})`)
  // @ts-expect-error wx is provided by WeChat JS-SDK
  console.log(`  wx.error: ${errorStatus} (${typeof wx.error})`)
  // @ts-expect-error wx is provided by WeChat JS-SDK
  console.log(`  wx.invoke: ${invokeStatus} (${typeof wx.invoke})`)
  // @ts-expect-error wx is provided by WeChat JS-SDK
  console.log(`  wx.config: ✅ (${typeof wx.config})`)

  // 更新状态
  checkJSSDKLoaded()

  checkResults.push('🎉 JSSDK 脚本加载成功！')
  console.log('🎉 JSSDK 脚本加载成功！')
  console.log('📊 当前状态:', {
    isJSSDKLoaded: isJSSDKLoaded.value,
    isJSSDKReady: isJSSDKReady.value,
    isWechatBrowser: isWechatBrowser.value,
  })
  console.log('=== 检查完成 ===')

  appStore.showSuccess(checkResults.join('\n'))
  // #endif

  // #ifndef H5
  console.error('❌ 仅在 H5 环境中支持')
  appStore.showError('仅在 H5 环境中支持')
  // #endif
}

// 检查分享功能状态
function checkShareStatus() {
  // 先检查并更新JSSDK加载状态
  if (isWechatBrowser.value) {
    checkJSSDKLoaded()
  }

  // #ifdef MP-WEIXIN
  const shareStatus = []

  // 检查 API 支持情况
  shareStatus.push(`uni.shareAppMessage: ${typeof uni.shareAppMessage === 'function' ? '✅' : '❌'}`)
  shareStatus.push(`uni.showShareMenu: ${typeof uni.showShareMenu === 'function' ? '✅' : '❌'}`)
  shareStatus.push(`uni.hideShareMenu: ${typeof uni.hideShareMenu === 'function' ? '✅' : '❌'}`)

  // 检查环境信息
  shareStatus.push(`当前平台: ${platformInfo.value.type}`)
  shareStatus.push(`小程序环境: ${platformInfo.value.wechat.isWechatMiniProgram ? '✅' : '❌'}`)

  appStore.showToast(shareStatus.join('\n'))
  // #endif

  // #ifdef H5
  const h5ShareStatus = []

  // 检查微信环境
  h5ShareStatus.push(`微信浏览器: ${isWechatBrowser.value ? '✅' : '❌'}`)
  h5ShareStatus.push(`微信环境: ${isWechatEnvironment.value ? '✅' : '❌'}`)

  // 检查 JS-SDK 加载状态
  if (typeof window !== 'undefined') {
    // 检查保存的原始微信JS-SDK对象
    // @ts-expect-error _wxOriginal is set by WeChat JS-SDK loading
    if (window._wxOriginal) {
      h5ShareStatus.push('✅ 原始微信JS-SDK对象已保存')
      // @ts-expect-error _wxOriginal is set by WeChat JS-SDK loading
      const wxOriginal = window._wxOriginal
      h5ShareStatus.push(`_wxOriginal.config: ${typeof wxOriginal.config === 'function' ? '✅' : '❌'}`)
      h5ShareStatus.push(`_wxOriginal.ready: ${typeof wxOriginal.ready === 'function' ? '✅' : '❌'}`)
      h5ShareStatus.push(`_wxOriginal.error: ${typeof wxOriginal.error === 'function' ? '✅' : '❌'}`)
    }
    else {
      h5ShareStatus.push('❌ 原始微信JS-SDK对象未保存')
    }

    // 检查当前wx对象
    h5ShareStatus.push(`当前wx对象: ${'wx' in window ? '✅ 已加载' : '❌ 未加载'}`)

    if ('wx' in window) {
      // @ts-expect-error wx is provided by WeChat JS-SDK
      h5ShareStatus.push(`wx.config: ${typeof wx.config === 'function' ? '✅' : '❌'}`)
      // @ts-expect-error wx is provided by WeChat JS-SDK
      h5ShareStatus.push(`wx.ready: ${typeof wx.ready === 'function' ? '✅' : '❌'}`)
      // @ts-expect-error wx is provided by WeChat JS-SDK
      h5ShareStatus.push(`wx.error: ${typeof wx.error === 'function' ? '✅' : '❌'}`)

      // 检查是否为uni-app的wx对象
      // @ts-expect-error wx is provided by WeChat JS-SDK
      if (Object.keys(wx).includes('$emit') || Object.keys(wx).includes('getSystemInfo')) {
        h5ShareStatus.push('🔍 当前wx对象是uni-app的，不是微信JS-SDK')
      }
      else {
        h5ShareStatus.push('✅ 当前wx对象是微信JS-SDK')
      }
    }
  }
  else {
    h5ShareStatus.push(`window 对象: ❌ 未定义`)
  }

  // 检查当前状态
  h5ShareStatus.push(`JSSDK 脚本: ${isJSSDKLoaded.value ? '✅ 已加载' : '❌ 未加载'}`)
  h5ShareStatus.push(`JSSDK 就绪: ${isJSSDKReady.value ? '✅' : '❌'}`)
  if (jssdkError.value) {
    h5ShareStatus.push(`错误信息: ${jssdkError.value}`)
  }

  appStore.showToast(h5ShareStatus.join('\n'))
  // #endif

  // #ifndef MP-WEIXIN || H5
  appStore.showError('仅在微信环境中支持')
  // #endif
}
</script>

<template>
  <view class="platform-demo">
    <view class="header">
      <text class="title">
        平台信息演示
      </text>
    </view>

    <view class="content">
      <!-- 平台信息 -->
      <view class="section">
        <text class="section-title">
          平台信息
        </text>
        <view class="info-item">
          <text class="label">
            平台类型:
          </text>
          <text class="value">
            {{ platformInfo.type }}
          </text>
        </view>
        <view class="info-item">
          <text class="label">
            平台名称:
          </text>
          <text class="value">
            {{ platformInfo.name }}
          </text>
        </view>
        <view class="info-item">
          <text class="label">
            终端类型:
          </text>
          <text class="value">
            {{ platformInfo.terminal }}
          </text>
        </view>
        <view class="info-item">
          <text class="label">
            操作系统:
          </text>
          <text class="value">
            {{ platformInfo.os }}
          </text>
        </view>
      </view>

      <!-- 屏幕信息 -->
      <view class="section">
        <text class="section-title">
          屏幕信息
        </text>
        <view class="info-item">
          <text class="label">
            屏幕宽度:
          </text>
          <text class="value">
            {{ screenWidth }}px
          </text>
        </view>
        <view class="info-item">
          <text class="label">
            屏幕高度:
          </text>
          <text class="value">
            {{ screenHeight }}px
          </text>
        </view>
        <view class="info-item">
          <text class="label">
            视口高度:
          </text>
          <text class="value">
            {{ viewportHeight }}px
          </text>
        </view>
        <view class="info-item">
          <text class="label">
            内容高度:
          </text>
          <text class="value">
            {{ contentHeight }}px
          </text>
        </view>
        <view class="info-item">
          <text class="label">
            屏幕尺寸:
          </text>
          <text class="value">
            {{ screenSize }}
          </text>
        </view>
      </view>

      <!-- 微信信息 -->
      <view class="section">
        <text class="section-title">
          微信信息
        </text>
        <view class="info-item">
          <text class="label">
            微信浏览器:
          </text>
          <text class="value">
            {{ platformInfo.wechat.isWechatBrowser ? '是' : '否' }}
          </text>
        </view>
        <view class="info-item">
          <text class="label">
            微信小程序:
          </text>
          <text class="value">
            {{ platformInfo.wechat.isWechatMiniProgram ? '是' : '否' }}
          </text>
        </view>
        <view class="info-item">
          <text class="label">
            微信环境:
          </text>
          <text class="value">
            {{ platformInfo.wechat.isWechatEnvironment ? '是' : '否' }}
          </text>
        </view>
        <view class="info-item">
          <text class="label">
            微信版本:
          </text>
          <text class="value">
            {{ platformInfo.wechat.version || '未知' }}
          </text>
        </view>
        <view class="info-item">
          <text class="label">
            支持JSSDK:
          </text>
          <text class="value">
            {{ platformInfo.wechat.canUseJSSDK ? '是' : '否' }}
          </text>
        </view>
      </view>

      <!-- 功能按钮 -->
      <view class="section">
        <text class="section-title">
          功能测试
        </text>
        <button class="btn" @click="refreshInfo">
          刷新信息
        </button>
        <button class="btn" @click="testNetwork">
          网络测试
        </button>
        <button class="btn" @click="testTitle">
          设置标题
        </button>
        <button class="btn" @click="testToast">
          提示测试
        </button>
      </view>

      <!-- 微信分享测试 -->
      <view class="section">
        <text class="section-title">
          微信分享测试
        </text>
        <text class="section-desc">
          在微信浏览器中可以测试 JSSDK 初始化和分享配置功能。在小程序中可以测试分享菜单控制和主动分享功能。
        </text>
        <view class="info-item">
          <text class="label">
            JSSDK 脚本:
          </text>
          <text class="value" :class="{ 'status-success': isJSSDKLoaded, 'status-error': !isJSSDKLoaded }">
            {{ isJSSDKLoaded ? '已加载' : '未加载' }}
          </text>
        </view>
        <!-- #ifdef H5 -->
        <view class="info-item">
          <text class="label">
            原始微信SDK:
          </text>
          <text class="value" :class="{ 'status-success': hasOriginalWxSDK, 'status-error': !hasOriginalWxSDK }">
            {{ hasOriginalWxSDK ? '已保存' : '未保存' }}
          </text>
        </view>
        <!-- #endif -->
        <view class="info-item">
          <text class="label">
            JSSDK 状态:
          </text>
          <text class="value" :class="{ 'status-success': isJSSDKReady, 'status-error': !isJSSDKReady }">
            {{ isJSSDKReady ? '已就绪' : '未就绪' }}
          </text>
        </view>
        <view v-if="jssdkError" class="info-item">
          <text class="label">
            错误信息:
          </text>
          <text class="value status-error">
            {{ jssdkError }}
          </text>
        </view>
        <view class="info-item">
          <text class="label">
            支持 JSSDK:
          </text>
          <text class="value">
            {{ canUseJSSDK ? '是' : '否' }}
          </text>
        </view>
        <view class="info-item">
          <text class="label">
            微信小程序:
          </text>
          <text class="value">
            {{ isWechatMiniProgram ? '是' : '否' }}
          </text>
        </view>
        <view class="info-item">
          <text class="label">
            微信环境:
          </text>
          <text class="value">
            {{ isWechatEnvironment ? '是' : '否' }}
          </text>
        </view>
        <view class="info-item">
          <text class="label">
            当前环境:
          </text>
          <text class="value">
            {{ platformInfo.type === 'mp-weixin' ? '微信小程序' : (platformInfo.type === 'h5' ? '网页端' : '其他') }}
          </text>
        </view>
        <button class="btn" @click="checkShareStatus">
          检查分享API状态
        </button>
        <button class="btn" @click="manualCheckJSSDK">
          详细检查JSSDK脚本
        </button>
        <button class="btn" @click="testNetworkConnectivity">
          测试网络连通性
        </button>
        <button class="btn" @click="checkWechatSupport">
          检查微信功能支持
        </button>
        <button class="btn" @click="testJSSDKInit">
          初始化 JSSDK
        </button>
        <button class="btn" @click="testShareConfig">
          配置分享
        </button>
        <button class="btn" @click="testShare">
          测试分享
        </button>

        <!-- 小程序分享按钮 -->
        <view class="divider">
          <text class="divider-text">
            小程序分享
          </text>
        </view>
        <button class="btn btn-secondary" @click="enableMiniProgramShare">
          启用分享菜单
        </button>
        <button class="btn btn-secondary" @click="disableMiniProgramShare">
          隐藏分享菜单
        </button>
        <button class="btn btn-primary" @click="triggerMiniProgramShare">
          主动分享 (需要用户手势)
        </button>

        <view class="share-tips">
          <text class="tips-title">
            分享说明：
          </text>
          <text class="tips-content">
            • 微信浏览器：需要初始化 JSSDK 后通过右上角菜单分享
          </text>
          <text class="tips-content">
            • 微信小程序：推荐使用右上角菜单分享，主动分享需要用户手势触发
          </text>
          <text class="tips-content">
            • 小程序主动分享：某些情况下可能受到平台限制，建议优先使用右上角菜单
          </text>
          <text class="tips-content">
            • 其他环境：不支持微信分享功能
          </text>
        </view>

        <view class="share-tips" style="margin-top: 20rpx; background-color: #fff3cd; border-left-color: #ffc107;">
          <text class="tips-title" style="color: #856404;">
            开发说明：
          </text>
          <text class="tips-content" style="color: #856404;">
            • 微信 JS-SDK 已自动引入，测试环境使用模拟配置
          </text>
          <text class="tips-content" style="color: #856404;">
            • 生产环境需要从后端获取真实的 appId、timestamp、nonceStr、signature
          </text>
          <text class="tips-content" style="color: #856404;">
            • 域名需要在微信公众平台配置 JS 接口安全域名
          </text>
          <text class="tips-content" style="color: #856404;">
            • 点击 "检查分享API状态" 可查看详细的加载情况
          </text>
        </view>

        <view class="share-tips" style="margin-top: 20rpx; background-color: #d1ecf1; border-left-color: #bee5eb;">
          <text class="tips-title" style="color: #0c5460;">
            当前环境信息：
          </text>
          <text class="tips-content" style="color: #0c5460;">
            • 平台类型: {{ platformInfo.type }}
          </text>
          <text class="tips-content" style="color: #0c5460;">
            • 微信浏览器: {{ platformInfo.wechat.isWechatBrowser ? '是' : '否' }}
          </text>
          <text class="tips-content" style="color: #0c5460;">
            • 微信小程序: {{ platformInfo.wechat.isWechatMiniProgram ? '是' : '否' }}
          </text>
          <text v-if="platformInfo.wechat.isWechatBrowser" class="tips-content" style="color: #0c5460;">
            • 微信版本: {{ platformInfo.wechat.version }}
          </text>
          <text v-if="!platformInfo.wechat.isWechatMiniProgram" class="tips-content" style="color: #0c5460;">
            • 小程序相关功能已被禁用，仅在小程序环境中可用
          </text>
        </view>

        <view class="share-tips" style="margin-top: 20rpx; background-color: #e2e3e5; border-left-color: #6c757d;">
          <text class="tips-title" style="color: #495057;">
            JSSDK 状态说明：
          </text>
          <text class="tips-content" style="color: #495057;">
            • JSSDK 脚本: {{ isJSSDKLoaded ? '✅ 已加载' : '❌ 未加载' }} - 表示微信 JS-SDK 脚本是否成功加载
          </text>
          <text class="tips-content" style="color: #495057;">
            • JSSDK 状态: {{ isJSSDKReady ? '✅ 已就绪' : '❌ 未就绪' }} - 表示是否已完成初始化配置
          </text>
          <text v-if="platformInfo.wechat.isWechatBrowser && isJSSDKLoaded" class="tips-content" style="color: #495057;">
            • 脚本已加载，可以点击"初始化 JSSDK"进行配置
          </text>
          <text v-if="platformInfo.wechat.isWechatBrowser && !isJSSDKLoaded" class="tips-content" style="color: #d32f2f;">
            • 脚本未加载，请尝试以下操作：
          </text>
          <text v-if="platformInfo.wechat.isWechatBrowser && !isJSSDKLoaded" class="tips-content" style="color: #d32f2f;">
            &nbsp;&nbsp;1. 点击"测试网络连通性"检查网络
          </text>
          <text v-if="platformInfo.wechat.isWechatBrowser && !isJSSDKLoaded" class="tips-content" style="color: #d32f2f;">
            &nbsp;&nbsp;2. 点击"详细检查JSSDK脚本"查看详情
          </text>
          <text v-if="platformInfo.wechat.isWechatBrowser && !isJSSDKLoaded" class="tips-content" style="color: #d32f2f;">
            &nbsp;&nbsp;3. 刷新页面重新加载脚本
          </text>
          <text v-if="!platformInfo.wechat.isWechatBrowser" class="tips-content" style="color: #495057;">
            • 当前不是微信浏览器环境，JSSDK 功能不可用
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped>
.platform-demo {
  padding: 20rpx;
}

.header {
  text-align: center;
  margin-bottom: 40rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.content {
  /* 内容样式 */
}

.section {
  margin-bottom: 40rpx;
  padding: 20rpx;
  border-radius: 10rpx;
  background-color: #f5f5f5;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.section-desc {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 20rpx;
  display: block;
  line-height: 1.4;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
  padding: 12rpx 0;
  border-bottom: 1rpx solid #e0e0e0;
}

.label {
  font-size: 28rpx;
  color: #666;
}

.value {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.btn {
  margin: 20rpx 0;
  padding: 20rpx;
  border-radius: 10rpx;
  background-color: #007aff;
  color: white;
  font-size: 28rpx;
  text-align: center;
  border: none;
}

.btn:hover {
  background-color: #0056cc;
}

.status-success {
  color: #28a745;
  font-weight: bold;
}

.status-error {
  color: #dc3545;
  font-weight: bold;
}

.divider {
  margin: 30rpx 0 20rpx;
  text-align: center;
  position: relative;
}

.divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1rpx;
  background-color: #e0e0e0;
}

.divider-text {
  background-color: #f5f5f5;
  padding: 0 20rpx;
  font-size: 24rpx;
  color: #999;
  position: relative;
  z-index: 1;
}

.btn-secondary {
  background-color: #6c757d;
}

.btn-secondary:hover {
  background-color: #545b62;
}

.btn-primary {
  background-color: #28a745;
}

.btn-primary:hover {
  background-color: #1e7e34;
}

.share-tips {
  margin-top: 30rpx;
  padding: 20rpx;
  background-color: #e8f4f8;
  border-radius: 8rpx;
  border-left: 4rpx solid #007aff;
}

.tips-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.tips-content {
  font-size: 24rpx;
  color: #666;
  line-height: 1.5;
  display: block;
  margin-bottom: 8rpx;
}
</style>
